<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 计算属性：实现计算，独立的成员 简化模板内的代码 -->
            <input type="text" v-model='obj.last'>
            <input type="text" v-model='obj.next'>
            <!-- 这样写模板太过臃肿 -->
            <!-- <p>{{obj.last.trim().toUpperCase()+':'+obj.next.trim().toLowerCase()}}</p> -->
            <!-- 像属性一样调用计算属性返回的结果 -->
            <p>{{string}}</p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    obj : {
                        last : '',
                        next : '',
                    },
                },
                computed : {
                    string(){
                        return this.obj.last.trim().toUpperCase()+':'+this.obj.next.trim().toLowerCase()
                    }
                },
            })
        </script>
    </body>
</html>